<template>
	<view class="my-container">
		<!-- 个人信息区域 -->
		<view class="profile-box">
			<image class="avatar" src="/static/avater/4.png" />
			<view class="profile-info">
				<view class="nickname">乖小孩</view>
				<view class="wechat-id">微信号：odnnjhdcmnxnnc</view>
				<view class="profile-tags">
					<button class="tag-btn">+ 状态</button>
					<button class="tag-btn friend-btn">1个朋友 <text class="red-dot"></text></button>
				</view>
			</view>
			<view class="profile-more">
				<image src="/static/icon/more.png" class="more-icon" />
			</view>
		</view>
		<view class="divider"></view>
		<!-- 功能列表 -->
		<view class="menu-list">
			<view class="menu-item">
				<image src="/static/icon/service.png" class="menu-icon" />
				<text>服务</text>
			</view>
			<view class="menu-item">
				<image src="/static/icon/collect.png" class="menu-icon" />
				<text>收藏</text>
			</view>
			<view class="menu-item">
				<image src="/static/icon/friend.png" class="menu-icon" />
				<text>朋友圈</text>
			</view>
			<view class="menu-item">
				<image src="/static/icon/video.png" class="menu-icon" />
				<text>视频号</text>
			</view>
			<view class="menu-item">
				<image src="/static/icon/card.png" class="menu-icon" />
				<text>卡包</text>
			</view>
			<view class="menu-item">
				<image src="/static/icon/emoji.png" class="menu-icon" />
				<text>表情</text>
			</view>
			<view class="menu-item">
				<image src="/static/icon/setting.png" class="menu-icon" />
				<text>设置</text>
			</view>
		</view>
		<!-- 底部tabbar占位 -->
		<view class="tabbar-placeholder"></view>
	</view>
</template>
<script setup>

</script>
<script>
import UserStatusIndicator from "../../components/UserStatusIndicator.vue";
import request from "../../utils/request.js";

export default {
	data() {
		return {};
	},
	methods: {},
};
</script>

<style>
.my-container {
	background: #fff;
	min-height: 100vh;
}

.profile-box {
	display: flex;
	align-items: center;
	padding: 24px 16px 12px 16px;
}

.avatar {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	margin-right: 12px;
}

.profile-info {
	flex: 1;
}

.nickname {
	font-size: 18px;
	font-weight: 500;
	color: #222;
}

.wechat-id {
	font-size: 13px;
	color: #888;
	margin-top: 2px;
}

.profile-tags {
	display: flex;
	align-items: center;
	margin-top: 8px;
}

.tag-btn {
	background: #f5f5f5;
	color: #888;
	font-size: 12px;
	border-radius: 12px;
	padding: 2px 12px;
	margin-right: 8px;
	border: none;
}

.friend-btn {
	color: #1aad19;
	position: relative;
}

.red-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #f44;
	border-radius: 50%;
	margin-left: 2px;
	vertical-align: middle;
}

.profile-more {
	margin-left: 8px;
}

.more-icon {
	width: 24px;
	height: 24px;
}

.divider {
	height: 1px;
	background: #f2f2f2;
	margin: 8px 0;
}

.menu-list {
	background: #fff;
}

.menu-item {
	display: flex;
	align-items: center;
	padding: 14px 16px;
	border-bottom: 1px solid #f2f2f2;
	font-size: 16px;
	color: #222;
}

.menu-icon {
	width: 24px;
	height: 24px;
	margin-right: 16px;
}

.tabbar-placeholder {
	height: 60px;
}
</style>

